<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        width: 600px;
        height: 400px;
        background-color: blue;
        margin: 50px auto;
        border: 3px solid rgb(228, 14, 14);
        position: relative;
        overflow: hidden;
    }
    .box ul {
        width: 4200px;
        height: 400px;
        list-style: none;
        float: left;
        margin-left: -600px;
        position: absolute;  
    }
    .box ul li {
        width: 600px;
        height: 400px;
        border-color: darkcyan;
        float: left;
    }
    .box ul li img {
        width: 600px;
        height: 400px;
    }
    .box .left{
        position: absolute;
        width: 30px;
        height: 30px;
        background-color: brown;
        left: 5px;
        font-size: xx-large;
        line-height: 30px;
        top:50%;
        transform: translateY(-50%);
        cursor: pointer;
    }
    .box .right{
        position: absolute;
        width: 30px;
        height: 30px;
        font-size: xx-large;
        line-height: 30px;
        right: 5px;
        background-color: brown;
        top:50%;
        transform: translateY(-50%);
        cursor: pointer;
    }
    .box ol{
        list-style: none;
        display: flex;
        position: fixed;
        width:200px;
        height: 20px;
        justify-content: space-around;
       margin-top: 350px;
       margin-left: 200px;
    }
    .box ol  li{
        width:20px;
        height: 20px;
        text-align: center;
        background-color: rgba(32, 99, 223, 0.74);
        border-radius: 50%;
    }
    .box ol .active{
        background-color: rgba(139, 0, 0, 0.651);
    }
</style>
<body>
    <div class="box">
        <ul>
            <li><img src="../耶啵/1a1148b54de88a9e16676df02437beeb.jpg" alt="" srcset=""></li>
            <li><img src="../耶啵/5dc900d9d2ada.webp" alt=""></li>
            <li><img src="../耶啵/OIP-C (2).jfif" alt=""></li>
            <li><img src="../耶啵/OIP-C (23).jfif" alt=""></li>
            <li><img src="../耶啵/微信图片_20211014154705.png" alt=""></li>
        </ul>
        <div  class="left">&lt;</div>
        <div  class="right">&gt;</div>
        <ol>
            <li  class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
    </div>
    <script src="../jquery/jquery-3.6.0.min.js"></script>
    <script>
        const ul = document.querySelector('ul')

        //创建前后两个节点
        function creat() {
            const theOne = document.querySelector('ul li:first-child')
            console.log(theOne)
            const thelast = document.querySelector('ul li:last-child')
            console.log(thelast)
            //克隆第一脏图片放在最后一张图片的后面
            let newOne = theOne.cloneNode(true)
            ul.appendChild(newOne)
            //复制最后一张图片放在第一张图片的前面
            let newlast = thelast.cloneNode(true)
            ul.insertBefore(newlast, theOne)
        }
        creat()
        
        function move(ele, option = { offset: 600, time: 1000, rate: 50 }) {
            ele.style.left = window.getComputedStyle(ele).left //获取当前位子初始值
            console.log('ele.style.left',ele.style.left)
            let offset = option.offset
            console.log(offset)
            let time = option.time
            let rate = option.rate
            let distance = rate * offset / time   //每次移动的距离
            console.log(distance)
            let goal = parseInt(ele.style.left) + offset  //目标距离
            console.log(goal)
            //到达目标距离结束定时器
            let timer = setInterval(function () {
                  if (parseInt(ele.style.left) == goal || Math.abs((Math.abs(goal) - Math.abs(parseInt(ele.style.left)))) < Math.abs(distance)) {
                    ele.style.left = goal + 'px'
                    clearInterval(timer)
                    //边界处理 向左滚动
                    if (parseInt(ele.style.left) == -3000) {
                        ele.style.left = 0 + 'px'
                    }
                    else if(parseInt(ele.style.left) == 600){
                         //边界处理 向右滚动
                        ele.style.left = -2400 + 'px'
                    }
                }
                 else{
                        ele.style.left=(parseInt(ele.style.left) + distance)+'px'
                        console.log('ele.style.left', ele.style.left)
                    }
            },rate)
        }
        //自动播放
        function  autoplay(){
            setInterval(function(){
                // move(ul, { offset: -600, time: 3000, rate: 50 })
                prve()
            },3000)
        }
        // autoplay()
        //上一张
        function prve(){
         $('.left').on('click',function(){
            if(--index<0){
                   index=count-1
               }
               setActive()
             move(ul, { offset: 600, time: 4500, rate: 50 })
         })
        }
        
        let index=0
        const  oli=document.querySelectorAll('ol  li')
        const  count=oli.length
        function setActive(){
               $('ol li').removeClass('active')
               oli[index].classList.add('active')
        }
        //下一张
        function next(){
         $('.right').on('click',function(){
            if(++index>count+1){
                   index=0
               }
               setActive()
             move(ul, { offset: -600, time: 4500, rate: 50 }) 
         })
        }
        next()
    </script>
</body>

</html>